// rcc: React Class Component
// rfc: React Function Component
import React, { Component } from "react";

export default class App extends Component {
  // 状态数据/模型数据
  state = {
    count: 8,
  };
  f1 = () => {
    // this.state.count--;  无效渲染
    let count = this.state.count - 1; //此处不推荐使用--
    // this.setState({ count }); //此方法(setState)来自父类 Component  并且此方法是异步执行,不会马上修改状态数据
    //  console.log(this.state.count);  //只能获取修改之前的数据
    this.setState({ count }, () => {
      // 此处的回调是异步回调 -- 在状态数据真正修改后才能执行
      console.log(this.state.count);
    });
  };
  f2 = () => {
    let count = this.state.count + 1;
    // this.setState({ count });
    // console.log(this.state.count);
    this.setState({ count }, () => {
      console.log(this.state.count);
    });
  };
  render() {
    return (
      <div>
        <button onClick={this.f1}>-</button>
        <span>{this.state.count}</span>
        <button onClick={this.f2}>+</button>
      </div>
    );
  }
}
